<template>
  <view class="home">
    <view class="activity-item" @click="$u.route(`/pages/index/luckyRaffle`)">
      <image :src="prefixURL(lucky.lottery_image)" class="activity-img" mode=""></image>
      <view class="activity-title">{{lucky.lottery_title}}</view>
    </view>
    <view class="activity-item" @click="$u.route(`/pages/index/activityDetail?id=${item.id}`)"
      v-for="(item,index) in list" :key="item.id">
      <image :src="prefixURL(item.image)" class="activity-img" mode=""></image>
      <view class="activity-title">{{item.title}}</view>
      <view class="activity-time">活动时间：{{item.start_time_text}} - {{item.end_time_text}}</view>
      <view class="activity-time">参与人数：{{item.signup_num}}人</view>
    </view>
  </view>
  <back-page />
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { activityList, luck_activity } from '../../config/api';
  import { onReachBottom } from '@dcloudio/uni-app'
  import { prefixURL } from '../../util/util';
  const params = ref({
    page: 1,
    limit: 15
  })
  const lucky = ref({})
  const list = ref([])
  onMounted(() => {
    _luck_activity()
    _activityList()
  })
  onReachBottom(() => {
    params.value.page++
    _activityList()
  })
  // 抽奖活动
  const _luck_activity = () => {
    luck_activity().then(res => {
      console.log(res)
      lucky.value = res.data
    })
  }
  const _activityList = () => {
    activityList({ ...params.value }).then(res => {
      console.log(res)
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    min-height: 100vh;
    background: #fef6fa;
  }

  .activity-item {
    padding: 24rpx;
    background-color: #fff;
    border-radius: 24rpx;
    margin: 20rpx;

    .activity-title {
      font-size: 28rpx;
      font-weight: 800;
      color: #000;
    }

    .activity-time {
      font-size: 24rpx;
      color: #666;
      margin-top: 12rpx;
    }

    image {
      width: 100%;
      height: 252rpx;
    }
  }
</style>